feat(nve-aspect-rose): Ny komponent for utsatte himmelretninger#913
Open
gruble wants to merge 3 commits into
Open
feat(nve-aspect-rose): Ny komponent for utsatte himmelretninger#913gruble wants to merge 3 commits into
gruble wants to merge 3 commits into
Conversation
gruble
requested review from
NVEJoel,
amish1188,
lisamarimyreneNVE,
malingranlynve and
tomapedersen
as code owners
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-913.westeurope.5.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
This PR adds a new shared web component (nve-aspect-rose) to visualize exposed/affected aspects (8 compass sectors) for reuse across React (varsom.no) and Angular (Regobs/Varsom-appen), including docs and unit tests.
Changes:
- Added
nve-aspect-roseLit web component rendering an SVG “aspect rose” with language and accessibility labeling. - Added Vitest/@open-wc tests for rendering, sector states, language labels, and aria-label behavior.
- Added documentation page and registered the component in the design system exports and component overview.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/nve-designsystem.ts | Exports the new NveAspectRose component from the library entrypoint. |
| src/components/nve-aspect-rose/nve-aspect-rose.component.ts | Implements the new SVG-based aspect rose component with props for value, lang, and label. |
| src/components/nve-aspect-rose/nve-aspect-rose.styles.ts | Adds base sizing and sector/circle styling for the component. |
| src/components/nve-aspect-rose/nve-aspect-rose.test.ts | Adds unit tests covering defaults, sector rendering/state, language labels, and aria labeling. |
| doc-site/components/nve-aspect-rose.md | Adds the documentation page with usage examples. |
| doc-site/components/Komponentoversikt.md | Registers the new component in the documentation component overview list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-913.westeurope.5.azurestaticapps.net |
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-913.westeurope.5.azurestaticapps.net |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Denne komponenten trenger vi på ny varsom.no og også i Regobs/Varsom-appen når vi skriver om dette til designsystemet.
Siden varsom.no bruker React og Regobs bruker Angular, ønsker vi å bruke en felles web-komponent for dette.
Her er link til saken for de som har tilgang: https://nveprojects.atlassian.net/browse/VAR-591
Jeg har tatt utgangspunkt i dagens Angular/svg-komponent i Regobs, forenklet koden og gjort den litt mer fleksibel.
Jeg byttet ut skrifttypen med en vi bruker i desigsystemet, ellers har jeg beholdt fargene fra Regobs. Bruker gjerne mer offisielle farger fra Designsystemet, men da hadde det vært kjekt å se skissene i Figma først. Har spurt designerne om dette.
Håper denne komponenten kan få bo i designsystemet inntil vi finner en bedre plass!